<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <img src="img/0.png">
    <img src="img/0.png">
    <span>时</span>
    <img src="img/0.png">
    <img src="img/0.png">
    <span>分</span>
    <img src="img/0.png">
    <img src="img/0.png">
    <span>秒</span>
</body>
<html>
<script>
    setInterval(function () {
        var date = new Date()//获取当前时间
        var hours = date.getHours()//获取小时
        var min = date.getMinutes()//获取分钟
        var sec = date.getSeconds()//获取秒数
        hours < 10 ? hours = "0" + hours : hours//判断hours是否小于10 如果是就在hours前面加上0  如果不是 则不变
        min < 10 ? min = "0" + min : min//判断hours是否小于10 如果是就在hours前面加上0  如果不是 则不变
        sec < 10 ? sec = "0" + sec : sec//判断hours是否小于10 如果是就在hours前面加上0  如果不是 则不变
        var res = String(hours) + String(min) + String(sec)//把时分秒拼接成字符串
        var imgs = document.querySelectorAll('body img')//获取到img元素
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].src = ('img/' + res[i] + '.png')//将图片插入到相应的位置中
        }
    })



</script>